﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="common/adminAll :: head(~{::title})">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <title>图书管理</title>
<!--        <script th:src="@{/style/js/jquery.min.js}"></script>-->
<!--        <link rel="stylesheet" th:href="@{/style/css/default.css}">-->
<!--        <link rel="stylesheet" th:href="@{/style/css/bootstrap-table.css}">-->
<!--        <link rel="stylesheet" th:href="@{/style/css/bootstrap-table.min.css}">-->
<!--        <script th:src="@{/style/js/bootstrap.min.js}"></script>-->
<!--        <script th:src="@{/style/js/bootstrap-table.min.js}"></script>-->
<!--        <script th:src="@{/style/js/bootstrap-table-zh-CN.min.js}"></script>-->
<!--        <script th:src="@{/style/js/sweetalert.min.js}"></script>-->
<!--        <script th:src="@{/style/js/custom.js}"></script>-->
<!--        <script th:src="@{/style/js/dayjs.min.js}"></script>-->
<!--        <script th:src="@{/style/js/main.js}"></script>-->
    </head>

    <body>
        <!--头部信息栏部分  begin-->
        <header th:replace="common/adminAll::header"></header>
        <!--头部信息栏部分 end-->


        <!--页面主题部分开始-->
        <section>
            <div class="mainwrapper">
                <!--侧变导航栏部分  begin-->
                <div th:replace="common/adminAll::leftMain(1)"></div>
                <!--侧变导航栏部分 end-->


                <!--左边主题显示部分开始-->
                <div class="mainpanel">
                    <div class="contentpanel">
                        <!--面板开始-->
                        <div class="panel panel-default">
                            <!--面板标题开始-->
                            <div class="panel-heading">
                                <h4 class="panel-title">图书管理</h4>
                                <p>查看图书信息</p>
                            </div>
                            <!--面板标题结束-->

                            <!--面板主体开始-->
                            <div class="panel-body">
                                <!--图书数据展示-->
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-12">
                                            <div style="margin-top: 10px" class="columns columns-left pull-left">
                                                <button class="btn btn-default" data-toggle="modal" data-target="#addbookInfo">添加</button>
                                                <button class="btn btn-danger" style="margin-left: 10px" onclick="delSelect()">删除选中</button>
                                            </div>
                                            <table class="table table-hover table-bordered" id="table"></table>
                                        </div>
                                    </div>
                                </div>
                                <!--图书数据展示结束-->
                            </div>
                            <!--面板主体结束-->
                        </div>
                        <!--面板结束-->
                    </div><!-- contentpanel -->
                </div>
                <!--左边主题显示部分结束-->
            </div>
        </section>
        <!--页面主题部分结束-->

        <!-- 模态框开始 -->
        <div th:replace="common/adminModalAll::mainModal"></div>
        <!--模态框结束-->
    </body>

    <script th:inline="javascript">
        var contextPath = [[${#request.getContextPath()}]];
    </script>

    <script>
        $('#file').fileinput({
            language: 'zh',     //设置语言
            dropZoneEnabled: false,      //是否显示拖拽区域
            uploadUrl: 'fileUpload',  //上传路径
            method: 'post',
            // allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],   //指定上传文件类型,不填不限制
            maxFileSize: 1048576,   //上传文件最大值，单位kb
            uploadAsync: true,  //异步上传
            maxFileCount: 1,    //上传文件最大个数
        }).on("fileuploaded", function(event,data) { //异步上传成功后回调
            console.log(data);		//data为返回的数据
            console.log(data.response);
            if (data.response.success === 'ok'){
                alert("上传成功")
                console.log(data.files[0].name)
                $("#addImageUrl").val(data.files[0].name)
            }else if (data.response.success === 'oko') {
                alert("上传成功666")
                console.log(data.response.fileName)
                $("#addImageUrl").val(data.response.fileName)
            }else {
                alert("上传失败，请稍后再试！")
            }
        });

        $('#uploadFile').fileinput({
            language: 'zh',     //设置语言
            dropZoneEnabled: false,      //是否显示拖拽区域
            uploadUrl: 'fileUpload',  //上传路径
            method: 'post',
            // allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],   //指定上传文件类型,不填不限制
            maxFileSize: 1048576,   //上传文件最大值，单位kb
            uploadAsync: true,  //异步上传
            maxFileCount: 1,    //上传文件最大个数
        }).on("fileuploaded", function(event,data) { //异步上传成功后回调
            console.log(data);		//data为返回的数据
            console.log(data.response);
            if (data.response.success === 'ok'){
                alert("上传成功")
                console.log(data.files[0].name)
                $("#updateImgUrl").val(data.files[0].name)
            }else if (data.response.success === 'oko') {
                alert("上传成功666")
                console.log(data.response.fileName)
                $("#updateImgUrl").val(data.response.fileName)
            }else {
                alert("上传失败，请稍后再试！")
            }
        });
    </script>

    <script>
        $("#table").bootstrapTable({
            url:"getAllBook",
            method:"get",
            sidePagination: "client",
            pageSize: 5,
            pageList: [5, 10, 20, 30, 50],
            cache:false,
            striped:true,
            pagination:true,
            sortable:true,
            sortOrder:"asc",
            search:true,
            showRefresh: true,
            clickToSelect:true,
            paginationPreText: "上一页",   //上一页文字
            paginationNextText: "下一页",  //下一页文字
            showButtonText: true,   //显示按钮文字
            paginationHAlign: "left",   //页数选择栏在左边
            paginationDetailHAlign: "right",    //页面大小选择在右边
            showToggle: true,
            columns:[
                { field: 'id', title: 'id',visible:false },
                { checkbox: true},
                { field: 'SerialNumber', title: '序号',
                    formatter: function (value, row, index) {
                        return index+1;
                    }
                },
                { field: 'isbn', title: 'isbn' },
                { field: 'imgUrl', title: '图书封面',
                    formatter : function (value, row, index) {
                        return "<img style='width: 50px;height: 50px;' src='"+ contextPath  + '/images/' + value+"' alt=''>"
                    }
                },
                { field: 'name', title: '图书名称' },
                { field: 'author', title: '作者' },
                { field: 'oldPrice', title: '原价' },
                { field: 'newPrice', title: '现价',
                  align: 'center',
                  valign: 'middle',
                  formatter:function (value,row,index){
                      return '<span class="label label-primary">'+ value +'</span>'
                  }
                },
                { field: 'publisher', title: '出版社' },
                { field: 'publishDate', title: '出版时间',
                  formatter: function (value, row, index) {
                    return dayjs(value).format('YYYY-MM-DD')
                  }
                },
                { field: 'authorLoc', title: '出版地' },
                { field: 'category', title: '类型',
                    formatter: function (value, row, index) {
                        switch (value){
                            case "SELECTED":
                                return "精选图书";
                            case "RECOMMENDED":
                                return "推荐图书";
                            case "BARGAIN":
                                return "特价图书";
                        }
                    }
                },
                { field: 'suit', title: '库存',
                  align: 'center',
                  valign: 'middle',
                  formatter:function (value,row,index){
                      var result=""
                      if (value === "YES"){
                          result+='<span class="label label-success">充足</span>'
                      }else {
                          result+='<span class="label label-danger">缺货</span>'
                      }
                      return result;
                  }
                },
                { field: 'info', title: '详细信息',
                  cellStyle: function (value, row, index) {
                      return {
                          css: {
                              "min-width": "80px",
                              "white-space": "nowrap",
                              "text-overflow": "ellipsis",
                              "overflow": "hidden",
                              "max-width": "100px",
                          }
                      }
                  },
                  formatter: function (value, row, index) {
                      return "" + value + "";
                  }
                },
                { field: 'operate',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    width: 150,
                    events: {
                        'click #edit': function (e, value, row, index) {
                            $('#bookId').val(row.id);
                            $('#updateIsbn').val(row.isbn);
                            $('#updateName').val(row.name);
                            $('#updateImgUrl').val(row.imgUrl);
                            $('#updateOldPrice').val(row.oldPrice);
                            $('#updateNewPrice').val(row.newPrice);
                            $('#updateAuthor').val(row.author);
                            $('#updatePublisher').val(row.publisher);
                            $('#updateAuthorLoc').val(row.authorLoc);
                            $('#updatePublishDate').val(dayjs(row.publishDate).format('YYYY-MM-DD'));
                            $('#updateCategory').val(row.category);
                            $('#updateSuit').val(row.suit);
                            $('#update-Info').val(row.info);
                        },
                        'click #delete': function (e, value, row, index) {
                            deleteBook(row.id);
                        }
                    },
                    formatter: function (value, row, index) {
                        var result = "";
                        result += '<button id="edit" class="btn btn-success" data-toggle="modal" data-target="#updateBookInfo">编辑</button>';
                        result += '<button id="delete" class="btn btn-danger" style="margin-left:10px;">删除</button>';
                        return result;
                    }
                }
            ]
        })
    </script>
</html>
